<template>
  <div class="section-box">
    <FrameLayout>
      <template v-slot:left>
        <Frame title="预警信息" style="height: 100%" :menuName="'yujing'">
          <template v-slot:body>
            <div class="tabs">
              <span
                v-for="(item, index) in tabTitList"
                :key="index"
                :class="{ activeTab: selectNum == index }"
                class="tabTits"
                @click="change(index)"
              >
                {{ item }}
              </span>
            </div>
            <div v-show="selectNum == 0" class="water-table">
              <Warningfxyj ref="fxyjChild" @buttonEvent="showFxyj" />
            </div>
            <div v-show="selectNum == 1" class="water-table">
              <Warningybyj ref="ybyjChild" @buttonEvent="showYbyj" />
            </div>
            <div v-show="selectNum == 2" class="water-table">
              <Warningjcyj ref="jcyjChild" />
            </div>
          </template>
        </Frame>
      </template>
      <template v-slot:right>
        <Frame v-show="infoTrue" title="预警方案详情" :panel-stretch="'rights'" style="height: 100%" :menuName="'yujing'">
          <template v-slot:body>
            <FxyjDetails v-if="selectNum == 0" ref="productInfo" />
            <YbyjDetails v-if="selectNum == 1" ref="productInfo1" />
          </template>
        </Frame>
      </template>
    </FrameLayout>
    <!--    称到CesiumView.vue下，因为要共用-->
    <!--    <Dlgdiv-->
    <!--      v-if="this.$store.getters.dlgParams.name=== 'WarningDigInfo'"-->
    <!--      mask-->
    <!--      class="MeasuredDlgStyle"-->
    <!--    >-->
    <!--      <template v-slot:body>-->
    <!--        <WarningDig />-->
    <!--      </template>-->
    <!--    </Dlgdiv>-->
    <!--    <Dlgdiv-->
    <!--      v-if="this.$store.getters.dlgParams.name=== 'WarningHdDigInfo'"-->
    <!--      mask-->
    <!--      class="MeasuredDlgStyle"-->
    <!--    >-->
    <!--      <template v-slot:body>-->
    <!--        <warningHdDig />-->
    <!--      </template>-->
    <!--    </Dlgdiv>-->
    <!-- <Dlgdiv
      v-if="this.$store.getters.dlgParams.name=== 'SendMessageDig'"
      mask
      class="MeasuredDlgStyle"
    >
      <template v-slot:title> 发送预警 </template>
      <template v-slot:body>
        <SendMessageDig  :fatherMethod="fathMethod" />
      </template>
    </Dlgdiv> -->
    <!-- 2023-12-4 新移过来-- -->
     <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'RainInfo'" mask class="MeasuredDlgStyle">
      <template v-slot:title> 站点详情 </template>
      <template v-slot:body>
        <MeasuredDlg />
      </template>
    </Dlgdiv>
    <!-- 2023-12-8 新移过来-- -->
    <!-- 村庄详情 -->
    <Dlgdivv v-if="this.$store.getters.dlgParams.name=='FZCCuZINFO'" :title="false" mask  class="MeasuredDlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="['5']" />
      </template>
    </Dlgdivv>
  </div>
</template>
<script>
import Warningfxyj from './warningfxyj.vue'
import Warningjcyj from './warningjcyj.vue'
import Warningybyj from './warningybyj.vue'
import FxyjDetails from './fxyjDetails.vue'
import YbyjDetails from './ybyjDetails.vue'
import MeasuredDlg from '@/views/components/MeasuredDlg.vue'
// import WarningDig from '@/views/components/warningDig.vue'
// import warningHdDig from '@/views/components/warningHdDig.vue'
//import SendMessageDig from '@/views/components/SendMessageDig.vue'

export default {
    name: 'Risk',
    components: {
        Warningfxyj,
        Warningjcyj,
        Warningybyj,
        // WarningDig, // 称到CesiumView.vue下，因为要共用
        // warningHdDig,
       // SendMessageDig,
        FxyjDetails,
        YbyjDetails,
        MeasuredDlg
    },
    data() {
        return {
            selectNum: 0,
            infoTrue: false, // 是否显示右侧
            tableFXdetails: -1,
            tabTitList: ['风险预警', '临近预警', '监测预警'], // ['风险预警', '预报预警', '监测预警'],
            holeList: [],
            waterList: [],
            wallList: [],
            ChartTestData: {},
            FXitem: {}, // 风险预警的参数
            ChartFxData: {}, // 风险的图表
            FxDetailsList: [],
            FxDetailInfo: {},
            productInfo1: {},
            ListStyleobj: {
              'stTime': this.$moment().format('YYYY-MM-DD 08:00'),
              'enTime': this.$moment().format('YYYY-MM-DD HH:mm')
            },
        }
    },
    watch: {
        // 监视数据状态，联动更新地图工具按钮位置，by lkl
        infoTrue(newVal, oldVal) {
          this.$nextTick(() => {
            if(this.selectNum==2){//避免0和1异步开打右侧面板
                this.infoTrue = false;
            }
            this.$store.dispatch('rightFold', !newVal)
          })
        }
    },
    created() {
        this.$store.dispatch('rightFold', true);
        if(this.$store.getters.thirdPageUser.tabType=='2'){
            this.selectNum = 2;
        }
        this.$store.getters.pageState.YJ = 'QX_ZQ'
        this.$nextTick(() => {
            this.$refs.fxyjChild.resetList()
        })
        // this.$refs.fxyjChild.resetList()
    },
    mounted() {
        this.$eventBus.$emit('EB_YJ_TAB_Change', {
            selectNum: this.selectNum,
            mdName: this.tabTitList[this.selectNum]
        })
        
        this.$eventBus.$on('FZCINFO', res => {
          this.$store.getters.dlgParams.params = {
            'Ewcode': res.ADCD,
            'strBegin': '',
            'strEnd': '',
            'stcd': ''
          }
          this.$store.getters.dlgParams.name = 'FZCCuZINFO'
        })

        this.$eventBus.$on('TK_Date_Card_Click', res => {
        var stTime = this.$moment(res.perioD_END).subtract(1, 'day').format('YYYY-MM-DD HH:mm')
        var enTime = this.$moment(res.perioD_END).format('YYYY-MM-DD HH:mm');
        this.ListStyleobj = {
          'stTime': stTime,
          'enTime': enTime
        }
      })

    },
    methods: {
        // 切换tab
        change(index,typ) {
            this.selectNum = index
            this.$refs.fxyjChild.selectNum = -1
            typ? '' :this.$refs.ybyjChild.selectNum = -1;
             this.$eventBus.$emit('EB_YJ_TAB_Change', {
                selectNum: index,
                mdName: this.tabTitList[index]
            })
            if (index == 1) {
                this.$refs.ybyjChild.ruleForm.dtBegin=this.$store.getters.startTimeCommon
                this.$refs.ybyjChild.ruleForm.dtEnd=this.$store.getters.endTimeCommon
                this.$refs.ybyjChild.TimeRain=[this.$store.getters.startTimeCommon,this.$store.getters.endTimeCommon]
                this.infoTrue = false
                this.$store.getters.pageState.YJ = 'LJ'
                this.$refs.ybyjChild.resetList_YBYJ(typ?'1':'')
            } else if (index == 2) {
                this.$refs.jcyjChild.ruleForm.dtBegin=this.$store.getters.startTimeCommon
                this.$refs.jcyjChild.ruleForm.dtEnd=this.$store.getters.endTimeCommon
                this.$refs.jcyjChild.TimeRain=[this.$store.getters.startTimeCommon,this.$store.getters.endTimeCommon]
                this.$store.getters.pageState.YJ = 'JC'
                this.$refs.jcyjChild.getDataJcyj()
                this.infoTrue = false
            } else {
                this.$refs.fxyjChild.ruleForm.dtBegin=this.$store.getters.startTimeCommon
                this.$refs.fxyjChild.ruleForm.dtEnd=this.$store.getters.endTimeCommon
                this.$refs.fxyjChild.ruleForm.TimeRain=[this.$store.getters.startTimeCommon,this.$store.getters.endTimeCommon]
                this.infoTrue = false
                this.$store.getters.pageState.YJ = 'QX_ZQ'
                this.$refs.fxyjChild.resetList()
            }
            this.$store.dispatch('rightFold', true)
            
           
        },
        // 风险预警
        showFxyj() {
            this.infoTrue = true
            this.$store.dispatch('rightFold', false)
        },
        // 临近预警
        showYbyj() {
            this.infoTrue = true
            this.$store.dispatch('rightFold', false)
        },
        fathMethod(typ){
        //  console.log(typ);
          if(typ=='YJJC'){//监测预警
          this.change(2);
          }else if(typ=='YJLJ'){//临近预警
          this.change(1,'LJ');
          };
          this.$store.getters.dlgParams.name = '';
          this.$store.getters.dlgParams.params = {};
        },
    }
}
</script>

<style lang="less" scoped>

.MeasuredDlgStyle{
   width: 70%!important;
   //height: 80% !important;
   height: 80% !important;
   max-height:700px;
   left: 15%;
   top: 5%
}
	.section-box {
		width: 100%;
		height: 100%;
	}

	.top_llfxChart {
		height: 300px;
		margin-bottom: 10px;
	}

	.tableBox {
		height: calc(100% - 320px);

		.collapse_div {
			height: calc(100% - 20px);
			overflow: auto;
		}
	}

	.tabs {
    width:100%;
    height:32px;
    margin-left:0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:url('~@/assets/imgNew/tabcont.png') no-repeat;
    background-size: 100% 100%;
    color:#C5E3E9;
    .activeTab{
        background:url('~@/assets/imgNew/tabact.png') no-repeat;
        background-position:bottom center;
        color:#fff;
     }
	}
	.tabs .tabTits{
    padding:0;
    line-height:32px;
    flex:1;
    font-size:13px;
    text-align: center;
    margin:0px;
    box-sizing: border-box;
    cursor: pointer;
  }
  
</style>
